// hui379 UI handler
let HUI = {
	buttonID : 'hui379-widget-button',
	viewID : 'PanelUI-hui379-view',
	url : {
		home : 'http://hui379.com/',
		donate : 'https://streamtip.com/t/wayne379',
		subscribe : 'https://secure.twitch.tv/products/wayne379/ticket?ref=below_video_subscribe_button',
		twitter : 'https://twitter.com/hui379',
		facebook : 'https://www.facebook.com/hui379',
		youtube : 'https://www.youtube.com/user/Hui379'
	},
	fitMode : true,
	hidePageUIMode : true,
	currentChatMode : 1,
	currentDisplayMode : 3,
	sizes : [
		{ width: 640, height: 480 },
		{ width: 800, height: 600 },
		{ width: 960, height: 720 },
		{ width: 1280, height: 840 }
	],
	STATUS_HOME_ACTIVED : false,
	jq$ : {},
	init : function() {
		CustomizableUI.createWidget({
		    id : this.buttonID,
		    type : "button",
		    viewId : this.viewID,
		    defaultArea : CustomizableUI.AREA_NAVBAR,
		    label : "喜好設定",
		    tooltiptext : "喜好設定",
			onCreated: (aNode) => {
				aNode.setAttribute('type', 'menu-button');
				let doc = aNode.ownerDocument || document;
				let menupopup = doc.createElement('menupopup');
				menupopup.addEventListener('popupshowing', this);
				aNode.appendChild(menupopup);
			},
			onCommand: (aEvent) => {
				let {areaType} = this.infoFromEvent(aEvent);
				// click on menu_panel
				if (areaType == CustomizableUI.TYPE_MENU_PANEL) {
					this.showSubViewFromArea(aEvent, areaType);
				}
				// click on toolbar
				else {
					this.openPage(this.url.home);
					this.onCommand(aEvent);
				}
			}
		});

		gBrowser.tabContainer.addEventListener("TabSelect", this, false);
		gBrowser.addEventListener("DOMContentLoaded", this, false);


	},
	openPage : function(url) {
		gBrowser.addTab(url);
	},
	handleEvent : function(aEvent) {
		switch(aEvent.type) {
			case "TabSelect": 
			case "DOMContentLoaded": {
				if (gBrowser.currentURI.spec === this.url.home) {
					this.pageLoaded(gBrowser.selectedBrowser.contentWindow);
				}
				break;
			}
			case 'popupshowing': {
				this.onPopupShowing(aEvent);
				break;
			}
			case 'ViewShowing': {
				let {widget} = this.infoFromEvent(aEvent);
				widget.anchor.setAttribute('open', 'true');
				break;
			}
			case 'ViewHiding': {
				let {widget} = this.infoFromEvent(aEvent);
				widget.anchor.removeAttribute('open');
				break;
			}
		}
	},
	onPopupShowing : function(aEvent) {
		try {
			let {doc, win, widget, areaType} = this.infoFromEvent(aEvent);
			let dm = doc.getAnonymousElementByAttribute(widget.anchor, 'anonid', 'dropmarker');
			let anchor = dm ? doc.getAnonymousElementByAttribute(dm, 'class', 'dropmarker-icon') : widget.anchor;

			this.showSubView(win, anchor, CustomizableUI.AREA_NAVBAR);

			aEvent.preventDefault();
			aEvent.stopPropagation();
		} catch(e) {
			// alert(e);
		}
	},
	showSubViewFromArea : function(aEvent, aAreaType) {
		try {
			let {doc, win, widget, areaType} = this.infoFromEvent(aEvent);
			widget.node.setAttribute('closemenu', 'none');
			
			this.showSubView(win, widget.node, CustomizableUI.AREA_PANEL);
		} catch(e) {
			// alert(e);
		}
	},
	showSubView : function(aWin, aAnchor, aArea) {
		let view = document.getElementById(this.viewID);
		view.addEventListener('ViewShowing', this, false);
		view.addEventListener('ViewHiding', this, false);
		// show sub view
		aWin.PanelUI.showSubView(this.viewID, aAnchor, aArea);
		// check & update UI after showSubView
		this.checkActived();
	},
	infoFromEvent: function(aEvent) {
		let doc = aEvent.target && aEvent.target.ownerDocument || document;
		let win = doc && doc.defaultView || window;
		let widgetGroup = CustomizableUI.getWidget(this.buttonID);
		return {
			doc: doc,
			win: win,
			widget: widgetGroup.forWindow(win),
			areaType: widgetGroup.areaType
		};
	},
	checkActived : function() {
		this.STATUS_HOME_ACTIVED = (gBrowser.currentURI.spec === this.url.home);
		this.updateUI();
	},
	updateUI : function() {
		var openBtn = document.getElementById('hui379-page-button');
		var chatBtn = document.getElementById('hui379-chat-button');
		var chatBtn2 = document.getElementById('hui379-chat-button2');
		var chatBtn3 = document.getElementById('hui379-chat-button3');
		var chatBtn4 = document.getElementById('hui379-chat-button4');
		var chatBtn5 = document.getElementById('hui379-chat-button5');
		var playerBtn = document.getElementById('hui379-player-button');
		var playerBtn2 = document.getElementById('hui379-player-button2');
		var playerBtn3 = document.getElementById('hui379-player-button3');
		var playerBtn4 = document.getElementById('hui379-player-button4');
		var playerBtn5 = document.getElementById('hui379-player-button5');

		openBtn.image = 'chrome://hui379/skin/switch32' + (this.STATUS_HOME_ACTIVED ? '-2' : '') + '.png';
		chatBtn.image = 'chrome://hui379/skin/row32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		chatBtn2.image = 'chrome://hui379/skin/column32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		chatBtn3.image = 'chrome://hui379/skin/tabs32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		chatBtn4.image = 'chrome://hui379/skin/reload32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		chatBtn5.image = 'chrome://hui379/skin/reload-eng32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		playerBtn.image = 'chrome://hui379/skin/small32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		playerBtn2.image = 'chrome://hui379/skin/medium32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		playerBtn3.image = 'chrome://hui379/skin/large32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		playerBtn4.image = 'chrome://hui379/skin/maximum32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';
		playerBtn5.image = 'chrome://hui379/skin/reload32' + (this.STATUS_HOME_ACTIVED ? '' : '-2') + '.png';

		openBtn.disabled = this.STATUS_HOME_ACTIVED;
		chatBtn.disabled = !this.STATUS_HOME_ACTIVED;
		chatBtn2.disabled = !this.STATUS_HOME_ACTIVED;
		chatBtn3.disabled = !this.STATUS_HOME_ACTIVED;
		chatBtn4.disabled = !this.STATUS_HOME_ACTIVED;
		chatBtn5.disabled = !this.STATUS_HOME_ACTIVED;
		playerBtn.disabled = !this.STATUS_HOME_ACTIVED;
		playerBtn2.disabled = !this.STATUS_HOME_ACTIVED;
		playerBtn3.disabled = !this.STATUS_HOME_ACTIVED;
		playerBtn4.disabled = !this.STATUS_HOME_ACTIVED;
		playerBtn5.disabled = !this.STATUS_HOME_ACTIVED;


	},
	pageLoaded : function(aWin) {
		this.jq$ = XPCNativeWrapper.unwrap(aWin).$; //unwrap XRayWrapper
		this.hidePageUI();
		try {
			this.displayMode(this.currentDisplayMode);
			this.chatMode(this.currentChatMode);
		} catch(e) {
			alert(e);
		}
	},
	hidePageUI : function() {
		if (this.hidePageUIMode) {
			// remove html tag
			this.jq$('br').remove();
			this.jq$('#top').css('margin-bottom', '5px').hide();
		}
	},
	chatMode : function(mode) {
		let $ = this.jq$;
		var stream_height = $('#flash_div').height();
		var char_panels = $('.panes').children();
		switch(mode) {
			case 1:
				$('ul').hide();
				char_panels.each(function(idx, obj) {
					$(obj).css('display', 'block');
					if (idx == 0) {
						$(obj).css('margin-bottom', '1px');
					}
				});
				break;
			case 2:
				$('ul').hide();
				char_panels.each(function(idx, obj) {
					$(obj).css('display', 'inline');
					if (idx == 0) {
						$(obj).css('margin-bottom', '');
					}
				});
				break;
			case 3:
				$('ul').show();
				char_panels.each(function(idx, obj) {
					$(obj).css('display', (idx == 0 ? 'inline' : 'none'));
					if (idx == 0) {
						$(obj).css('margin-bottom', '');
					}
				});
				break;
		}
		this.currentChatMode = mode;
		this.fitSize();
	},
	displayMode : function(mode) {
		var width = this.sizes[mode].width;
		var height = this.sizes[mode].height;
		this.jq$('#flash_div').width(width).height(height).children().width(width).height(height);
		this.currentDisplayMode = mode;
		this.fitSize();
	},
	refreshChatRoom : function(idx) {
		var char_panels = this.jq$('.panes').children();
		var src = char_panels.eq(idx).find('iframe').prop('src');
		char_panels.eq(idx).find('iframe').prop('src', '');
		char_panels.eq(idx).find('iframe').prop('src', src);
	},
	refreshPlayer : function() {
		this.jq$('#mainbox').prop('src', '').prop('src', 'wayne379.html');
	},
	fitSize : function() {
		if (this.fitMode) {
			let $ = this.jq$;
			var stream_height = $('#flash_div').height() / (this.currentChatMode == 1 ? 2 : 1);
			$('.panes').children().each(function(idx, obj) {
				var char_panel = $(obj);
				char_panel
					.height(stream_height)
					.children().height(stream_height);
			});
		}
	},
};

HUI.init();